<template>
  <div id="mainContent">
    <!-- 页面加载动画 -->
    <loading v-if='loading'></loading>
    <transition name="fade" appear type='transition'>  
      <router-view :key="$route.fullPath" v-if="isRouterAlive"></router-view>  
    </transition>
  </div>
</template>

<script>
import Loading from "./components/public/loading";
import navFooter from "./components/public/navFooter";
import { mapState } from "vuex";
export default {
  name: "app",
  components: {
    navFooter,
    Loading
  },
   provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
    return {
      reload: this.reload                                              
    }
  },
  computed:{
        ...mapState([
            'loading'
        ])
   },
  data() {
    return {
      transitionName: "slide-left",
      isRouterAlive: true 
    };
  },

  methods: {
    reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                  }) 
               

              }
  },
  watch: {
    $route(to, from) {
      document.body.scrollTop = 0

     document.documentElement.scrollTop = 0;
      // let routes = this.$router.options.routes;
      // if (to.path == "/" || to.path == "/home") {
      //   this.transitionName = "slide-right";
      // } else {
      //   let toIndex = 0;
      //   let fromIndex = 0;
      //   for (let i = 0; i < routes.length; i++) {
      //     let item = routes[i];
      //     if (item.name == to.name) {
      //       toIndex = i;
      //     }
      //     if (item.name == from.name) {
      //       fromIndex = i;
      //     }
      //   }
      //   if (toIndex > fromIndex) {
      //     this.transitionName = "slide-left";
      //   } else {
      //     this.transitionName = "slide-right";
      //   }
      // }
      // document.documentElement.scrollTop = document.body.scrollTop = 0;
      // this.$store.dispatch("saveRouter", {
      //   toPath: to.path,
      //   fromPath: from.path
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  margin: 0 auto;
  background-color: #eee !important;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.8s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  display:none;


  
}

</style>
